<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>制作横向菜单</title>
    <style>
        a {
            display: block;
            text-decoration: none;
            color: white;
            border: 1px solid white;
            background: #008000;
            width: 100px;
            text-align: center;
            line-height: 30px;
        }

        a:hover {
            background: pink;
        }

        div {
            display: none;
        }
    </style>
  </head>

  <body>
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>
          <a href="#">手机数码</a>
        </td>
        <td>
          <a href="#">淘宝集市</a>
        </td>
        <td>
          <a href="#">品牌商城</a>
        </td>
      </tr>
      <tr>
        <td>
          <div id="1">
            <a href="#">手机数码1</a>
            <a href="#">手机数码2</a>
            <a href="#">手机数码3</a>
          </div>
        </td>
        <td>
          <div id="2">
            <a href="#">淘宝集市1</a>
            <a href="#">淘宝集市2</a>
            <a href="#">淘宝集市3</a>
          </div>
        </td>
        <td>
          <div id="3">
            <a href="#">品牌商城1</a>
            <a href="#">品牌商城2</a>
            <a href="#">品牌商城3</a>
          </div>
        </td>
      </tr>
    </table>
  </body>

  <script>
      // 绑定事件
      (function () {
          let links = document.getElementsByTagName("a");
          for (let i = 0; i < links.length; i++) {
              let ele = links[i];
              ele.onmouseover = show;//onclick
              ele.onmouseout = noShow;
          }
      })(window);

      function findId(text) {
          let id;
          switch (text) {
              case '手机数码':
                  id = "1";
                  break;
              case '淘宝集市':
                  id = "2";
                  break;
              case '品牌商城':
                  id = "3";
                  break;
          }
          return id;
      }

      function show() {
          var event = event || window.event;
          let text = event.srcElement.innerText.substring(0, 4);
          //console.log(text);

          let id = findId(text);
          if (id != null) {
              document.getElementById(id).style.display = "inline";
          }
          return id;
      }

      function noShow() {
          let id = show();
          document.getElementById(id).style.display = "none";
      }
  </script>
</html>